<template>
  <div style="height: 100vh; background-color:#ffffff ">
    <el-scrollbar ref="scroll" class="scrollbar-wrapper" wrap-style="overflow-x:hidden;">

      <HLSPlay style="margin: auto" ref="hlsplayRef" :src="vurl" :cover_url="''"></HLSPlay>

      <div style="width: 70%;margin: auto;margin-top: 2%" id="up">

        <el-row :gutter="0"  style="background-color: #ffffff">
          <el-col :span="16">
            <!--          标题-->
            <el-row>
              <h3>{{ play.sername }}</h3>
            </el-row>
            <!--          -->
            <el-divider></el-divider>
            <el-row style="color: #ffffff;font-size: 12px;padding-top: 0px;">
              <el-col>

                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" v-text="videoData.datetime"/>
                发布于：
                <span/>
                <br>
                <span v-text="videoData.vcount"/> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"/>
                <span v-text="videoData.vcount"/> 弹幕
              </el-col>
            </el-row>
            <el-row style="padding-top: 5px; padding-bottom: 5px">
              <el-col :span="4">
                <router-link :to="`/user/${videoData.uid}`">
                  <el-avatar :src="videoData.uid" :size="65">
                  </el-avatar>
                </router-link>
              </el-col>
              <el-col :span="20">
                <router-link :to="`/user/${videoData.userId}`">
                  <span v-text="play.uname"/>
                </router-link>
                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"/>
                <span style="color: #999;font-size: 12px;" v-text="play.des"/><span
                  v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'"/>
                <el-button type="primary" @click="conit">
                  <span>{{ isc }}</span><span v-html="'&nbsp;&nbsp;'"/>
                  <span v-text="videoData.followCount"/>
                </el-button>
                <el-button @click="initPictureInPicture">开启画中画</el-button>
                <br>
                <br>
                <span v-text="videoData.des"/>
              </el-col>
            </el-row>

            <el-divider></el-divider>
            <el-row >
              <el-col>
                标签：
                <span>
               <el-button>{{ play.tag }}</el-button>
              </span>
                <el-button>{{ play.tag }}</el-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="2">
            <div>评价一下吧</div>
          </el-col>
          <el-col :span="6">
            <el-rate></el-rate>
            <el-tooltip>

            </el-tooltip>
          </el-col>

        </el-row>

      </div>

       <div class="video-container">
         <child-component :is="'Comments'" :articleId="play.id"
                          style="margin: auto;width: 70%;margin-top:2%;"></child-component>
       </div>



    </el-scrollbar>
  </div>
</template>
<script>
import simplebar from "simplebar-vue";
import Comments from "@/components/Comments.vue";
import HLSPlay from "@/components/HLSPlay.vue";
import {addcon, checkcon} from "@/api";

export default {
  props: {
    play: {
      type: Object,
    },
    vurl: {
      type: String,
    }

  },
  // eslint-disable-next-line vue/no-unused-components
  components: {HLSPlay, simplebar, Comments},
  mounted: function () {


    console.log(this.$cookies.get("user").id, "dd")
    console.log(this.play.uid, "cc")
    this.isc = checkcon({uid: this.$cookies.get("user").id, cuid: this.play.uid}).then(res => {

      if (res.data.code == 200) {
        this.isc = '已关注'
        console.log(
            res.data.code, this.isc
        )
      } else {
        this.isc = '关注'
      }
    })
//------
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const isInViewport = entry.isIntersecting;
        // 不管之前状态如何，每次根据当前的可见性来决定是否进入或退出画中画模式
        if (isInViewport) {
          this.videoInViewport = true;
          if (document.exitPictureInPicture) {
            document.exitPictureInPicture().then(() => {
              console.log('已退出画中画模式，回到正常播放模式');
            }).catch((error) => {
              console.error('退出画中画模式失败', error);
            });
          }
        } else {
          this.videoInViewport = false;
          const player = this.$refs.hlsplayRef.$refs.videoPlayer.player;
          if (player && document.pictureInPictureEnabled) {
            player.requestPictureInPicture().then(() => {
              console.log('已进入画中画模式');
            }).catch((error) => {
              console.error('进入画中画模式失败', error);
            });
          }
        }
      });
    }, {
      root: null, // 监听整个视口，如果有滚动容器等可指定具体的根元素
      rootMargin: '0px',
      threshold: 0.1 // 当视频元素10%进入视口就认为可见，可根据需求调整这个阈值
    });

    // 获取视频播放组件实例对应的DOM元素，用于添加到IntersectionObserver的监听中
    const videoElement = this.$refs.hlsplayRef.$el;
    if (videoElement) {
      this.observer.observe(videoElement);
    }
  },
  watch: {
    play() {
      console.log("dd")

    },
    vurl() {
      console.log(this.vurl)
    }
  },
  data() {
    return {
      videoData: {},
      url: '',
      isc: '关注',
      videoInViewport: true, // 新增变量，用于记录视频是否在视口内，初始化为true表示默认在视口内
      observer: null // 用于存储IntersectionObserver实例
    }

  },
  methods: {
    initPictureInPicture() {
      const player = this.$refs.hlsplayRef.$refs.videoPlayer.player;
      if (player && document.pictureInPictureEnabled) {
        player.requestPictureInPicture().then(() => {
          console.log('已成功进入画中画模式（首次手动开启）');
        }).catch((error) => {
          console.error('首次手动开启画中画模式失败，错误信息：', error);
        });
      }
    },
    enterPictureInPicture() {
      const player = this.$refs.hlsplayRef.$refs.videoPlayer.player;
      if (player && document.pictureInPictureEnabled) {
        player.requestPictureInPicture().then(() => {
          console.log('已成功进入画中画模式');
        }).catch((error) => {
          console.error('进入画中画模式失败，错误信息：', error);
        });
      }
    },
    exitPictureInPicture() {
      if (document.exitPictureInPicture) {
        document.exitPictureInPicture().then(() => {
          console.log('已成功退出画中画模式，回到正常播放模式');
        }).catch((error) => {
          console.error('退出画中画模式失败，错误信息：', error);
        });
      }
    },
    conit() {
      addcon({uid: this.$cookies.get("user").id, cuid: this.play.uid}).then(res => {
        if (res.data.code === 200) {
          this.$message.success("关注成功")
          this.isc = '已关注'
        } else {
          this.$message.error("关注失败")
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.video-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#user {

  width: 70px;
  height: 70px;
  // 50%变圆形
  border-radius: 50%;

}

#up {

}

.category-link {
  color: #999;
}

a {
  text-decoration: none;
}
</style>